<template>
	<view class="pageContain" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
		<!-- 背景图 -->
		<BgImage />
		<!-- logo显示 -->
		<NavBar leftType="text" letText="LOGO" />
		<!-- tab框 -->
		<view class="tabList">
			<view v-for="item in tabList" :key="item" @click="handleTab(item)"
				:class="['tabItem', isTab === item ? 'active' : '']">
				<uni-icons v-if="item === '搜索'" type="search" size="14"
					:color="isTab === item ? '#4C4C4C' : '#FFF'"></uni-icons>
				{{ item }}
			</view>
		</view>
		<view class="mainContent" :class="{ 'slideUp': !isShow }">
			<!-- 主题卡片 -->
			<view class="themeCard">
				<image class="cardBg" src="../../static/images/home/card.png"></image>
				<view class="topCard">
					<image class="subTitle" src="../../static/images/home/subTitle.png"></image>
					<br>
					<image class="mainTitle" src="../../static/images/home/mainTitle.png"></image>
					<image class="mascot" src="../../static/images/home/mascot.png"></image>
				</view>
				<view class="bottomCard">
					大数据说咱国内买保险的宝子，90% 都没仔细啃过条款。这里面有你吗?别慌!快来和我玩个超上头的保险知识大闯关!3 道小问题，测完直接原地变身保险小达人斗 手慢无!
					<br>速来挑战
				</view>
			</view>
			<!-- 使用类型 -->
			<view class="useTypeList public_flexBetween">
				<view class="useCard public_flexBetween">
					<image class="cardBg" src="../../static/images/home/useCard1.png"></image>
					<view class="textMain">
						<view>测一测你的</view>
						<view>小白指数</view>
						<view class="leftIcon">
							<uni-icons type="right" size="16" color="#FFF"></uni-icons>
						</view>
					</view>
					<image class="cardLogo" src="../../static/images/home/useLogo1.png"></image>
				</view>
				<!-- 上传保单 -->
				<up-upload @afterRead="handleFileUpload" name="files" accept="application/pdf" :maxSize="10 * 1024 * 1024"
					:previewFullImage="false" class="upload-wrapper" :disabled="hasToken">
					<view class="useCard public_flexBetween" @click="handleUpload">
						<image class="cardBg" src="../../static/images/home/useCard2.png"></image>
						<view class="textMain">
							<view>上传你的</view>
							<view>保单</view>
							<view class="leftIcon">
								<uni-icons type="right" size="16" color="#FFF"></uni-icons>
							</view>
						</view>
						<image class="cardLogo" src="../../static/images/home/useLogo2.png"></image>
					</view>
				</up-upload>
			</view>
			<!-- 常见问题 -->
			<view class="commonProblem">
				<view class="problemItem" v-for="item in questionList" :key="item.id">
					{{ item.question }}
				</view>
			</view>
		</view>
		<!-- 聊天框 -->
		<ChatMode :isMode="true" :chatListShow="chatListShow" :fileInfo="fileInfo" />
		<!-- 登录框 -->
		<LoginPopup v-model:loginPopupShow="loginPopupShow" />
	</view>
</template>

<script setup>
import LoginPopup from '../../components/LoginPopup.vue';
import { watch, ref, getCurrentInstance, computed } from 'vue';
const { proxy } = getCurrentInstance();
const tabList = ['保单导诊', '我的保单', '搜索'];
const isTab = ref('保单导诊'); // 选中的tab
const questionList = ref([
	{ id: 1, question: '“玻璃险”仅赔车窗，天窗需单独约定?' },
	{ id: 2, question: '医疗险里的特需部/国际部需单独附加条款，否则不赔，是这样吗?' },
]);
const isShow = ref(true); // 显示页面
const loginPopupShow = ref(false); // 登录
const chatListShow = ref(false);

// 上传相关状态
const fileInfo = ref(null);

// 触摸相关状态
const touchStartY = ref(0);
const touchEndY = ref(0);

// 计算是否有登录token
const hasToken = computed(() => {
	return !uni.getStorageSync('loginToken');
});

// 获取模态框的显示隐藏
watch(() => proxy.$store.state.chatPopupShow, (nv) => {
	isShow.value = nv ? false : true;
}, { immediate: true, deep: true });

// tab切换
const handleTab = (item) => {
	// 如果是我的保单就跳转页面
	if (item === '我的保单') {
		if (uni.getStorageSync('loginToken')) {
			uni.navigateTo({
				url: '/pages/overview/overview'
			})
			isTab.value = item;
		} else {
			loginPopupShow.value = true;
		}
	} else if (isTab.value !== item) {
		isTab.value = item;
	}
}

// 上传保单点击处理
const handleUpload = () => {
	// 未登录时显示登录弹窗
	if (!uni.getStorageSync('loginToken')) {
		loginPopupShow.value = true;
	}
	// 如果已登录，up-upload组件会自动处理文件选择
}

// 处理文件上传
const handleFileUpload = ({ file }) => {
	console.log('上传的文件:', file);
	fileInfo.value = file;
}

// 触摸开始
const handleTouchStart = (e) => {
	touchStartY.value = e.touches[0].clientY;
}

// 触摸结束
const handleTouchEnd = (e) => {
	touchEndY.value = e.changedTouches[0].clientY;
	const deltaY = touchStartY.value - touchEndY.value;

	// 滑动距离大于50px时才触发
	if (Math.abs(deltaY) > 50) {
		// 向上滑动，显示聊天框，向下滑动，隐藏聊天框
		chatListShow.value = deltaY > 0 ? true : false;
	}
}
</script>

<style lang='scss' scoped>
.pageContain {

	// tab切换
	.tabList {
		display: flex;
		margin-top: 46rpx;
		padding-left: 32rpx;
		align-items: center;

		.tabItem {
			height: 52rpx;
			color: #FFF;
			display: flex;
			padding: 0 14rpx;
			font-size: 24rpx;
			line-height: 52rpx;
			margin-right: 16rpx;
			align-items: center;
			border-radius: 52rpx;
			background: rgba(#FFF, 0.43);
		}

		.active {
			color: #4C4C4C;
			background: #FFF;
		}
	}

	// 主题卡片
	.themeCard {
		width: 100%;
		margin-top: 24rpx;
		position: relative;

		// 设置背景图片
		.cardBg {
			top: 0;
			z-index: -1;
			left: -32rpx;
			width: 100vw;
			height: 432rpx;
			position: absolute;
		}

		.topCard {
			position: relative;
			padding-top: 50rpx;
			padding-left: 56rpx;

			// 副标题
			.subTitle {
				width: 204rpx;
				height: 32rpx;
			}

			// 主标题
			.mainTitle {
				width: 286rpx;
				height: 40rpx;
			}

			// 吉祥物
			.mascot {
				right: 32rpx;
				top: -128rpx;
				width: 320rpx;
				height: 310rpx;
				position: absolute;
			}
		}

		.bottomCard {
			font-size: 24rpx;
			text-align: center;
			line-height: 36rpx;
			padding: 68rpx 60rpx 0 32rpx;
			color: rgba(31, 6, 3, 0.71);
		}
	}

	// 使用类型
	.useTypeList {
		margin-top: 24rpx;

		.useCard {
			width: 322rpx;
			padding: 20rpx;
			cursor: pointer;
			position: relative;
			padding-bottom: 16rpx;
			transition: transform 0.3s ease;

			&:hover {
				transform: scale(1.1);
			}

			&:first-child {
				padding-right: 0;
			}

			// 卡片背景
			.cardBg {
				top: 0;
				left: 0;
				z-index: -1;
				width: 100%;
				height: 100%;
				position: absolute;
			}

			// 文字内容
			.textMain {
				>view {
					color: #FFF;
					font-weight: 500;
					line-height: 20px;
				}

				.leftIcon {
					width: 42rpx;
					height: 42rpx;
					margin-top: 12rpx;
					text-align: center;
					border-radius: 42rpx;
					background-color: rgba(#FFF, 0.43);
				}
			}

			// logo
			.cardLogo {
				width: 136rpx;
				height: 136rpx;
			}
		}
	}

	// 常见问题
	.commonProblem {
		margin-top: 26rpx;
		background: #FFF;
		padding: 2rpx 15rpx;
		border-radius: 24rpx;
		box-shadow: 0px 0px 40rpx 0px rgba(180, 148, 148, 0.21);

		.problemItem {
			padding: 16rpx 0;
			color: #11073C;
			font-size: 24rpx;
			line-height: 32rpx;
			border-bottom: 1px solid #F8F8F8;
		}
	}
}

// 上传组件样式  
.upload-wrapper {
	width: 322rpx !important;
	flex: none !important;
}

.mainContent {
	transition: transform 1s ease-out, opacity 1s ease-out;
	transform: translateY(0);
	opacity: 1;
}

.slideUp {
	transform: translateY(-100%);
	opacity: 0;
}
</style>